<template>
  <view class="container">
    <!-- 医生信息 -->
    <view class="doctor-info">
      <image :src="doctorInfo.avatar" mode="aspectFill"></image>
      <view class="info">
        <view class="name-title">
          <text class="name">{{ doctorInfo.name }}</text>
          <text class="title">{{ doctorInfo.title }}</text>
        </view>
        <text class="department">{{ doctorInfo.department }}</text>
      </view>
    </view>

    <!-- 就诊时间 -->
    <view class="section">
      <view class="section-title">就诊时间</view>
      <view class="time-info">
        <text>{{ selectedDate }} {{ selectedTime }}</text>
      </view>
    </view>

    <!-- 就诊信息 -->
    <view class="section">
      <view class="section-title">就诊信息</view>
      <view class="form">
        <view class="form-item">
          <text class="label">就诊人</text>
          <input
            type="text"
            v-model="formData.patientName"
            placeholder="请输入就诊人姓名"
          />
        </view>
        <view class="form-item">
          <text class="label">手机号码</text>
          <input
            type="number"
            v-model="formData.phone"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </view>
        <view class="form-item">
          <text class="label">身份证号</text>
          <input
            type="idcard"
            v-model="formData.idCard"
            placeholder="请输入身份证号"
          />
        </view>
        <view class="form-item">
          <text class="label">病情描述</text>
          <textarea
            v-model="formData.description"
            placeholder="请描述您的症状和病情"
          />
        </view>
      </view>
    </view>

    <!-- 支付信息 -->
    <view class="section">
      <view class="section-title">支付信息</view>
      <view class="payment-info">
        <view class="price-item">
          <text>挂号费</text>
          <text class="price">¥{{ doctorInfo.price }}</text>
        </view>
        <view class="price-item">
          <text>优惠券</text>
          <text class="coupon" @click="selectCoupon">选择优惠券</text>
        </view>
        <view class="price-item total">
          <text>实付金额</text>
          <text class="price">¥{{ doctorInfo.price }}</text>
        </view>
      </view>
    </view>

    <!-- 底部支付按钮 -->
    <view class="footer">
      <view class="total-price">
        <text>合计：</text>
        <text class="price">¥{{ doctorInfo.price }}</text>
      </view>
      <button class="pay-btn" @click="submitAppointment">立即支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctorId: "",
      selectedDate: "",
      selectedTime: "",
      doctorInfo: {
        id: 1,
        name: "张医生",
        title: "主任医师",
        department: "内科",
        avatar: "/static/doctors/doctor1.jpg",
        price: 200,
      },
      formData: {
        patientName: "",
        phone: "",
        idCard: "",
        description: "",
      },
    };
  },
  onLoad(options) {
    this.doctorId = options.doctorId;
    this.selectedDate = options.date;
    this.selectedTime = options.time;
    this.getDoctorInfo();
  },
  methods: {
    getDoctorInfo() {
      // 根据 doctorId 获取医生信息
      // 实际项目中应该调用接口获取数据
    },
    selectCoupon() {
      uni.navigateTo({
        url: "/pages/coupon/coupon",
      });
    },
    submitAppointment() {
      // 表单验证
      if (!this.formData.patientName) {
        uni.showToast({
          title: "请输入就诊人姓名",
          icon: "none",
        });
        return;
      }
      if (!this.formData.phone) {
        uni.showToast({
          title: "请输入手机号码",
          icon: "none",
        });
        return;
      }
      if (!this.formData.idCard) {
        uni.showToast({
          title: "请输入身份证号",
          icon: "none",
        });
        return;
      }

      // 提交预约信息
      uni.showLoading({
        title: "提交中...",
      });

      // 模拟提交预约信息
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: "预约成功",
          content: "请按时就诊，祝您早日康复！",
          showCancel: false,
          success: () => {
            uni.navigateBack();
          },
        });
      }, 1500);
    },
  },
};
</script>

<style lang="scss">
.container {
  padding-bottom: 120rpx;
}

.doctor-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin-right: 20rpx;
  }

  .info {
    flex: 1;

    .name-title {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .name {
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .title {
        font-size: 24rpx;
        color: #666;
      }
    }

    .department {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .time-info {
    font-size: 28rpx;
    color: #333;
  }

  .form {
    .form-item {
      margin-bottom: 20rpx;

      .label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }

      input,
      textarea {
        width: 100%;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
      }

      textarea {
        height: 160rpx;
        padding: 20rpx;
      }
    }
  }

  .payment-info {
    .price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      font-size: 28rpx;

      .price {
        color: #ff6b6b;
        font-weight: bold;
      }

      .coupon {
        color: #007aff;
      }

      &.total {
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;

        text,
        .price {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .total-price {
    flex: 1;
    font-size: 28rpx;

    .price {
      font-size: 36rpx;
      color: #ff6b6b;
      font-weight: bold;
    }
  }

  .pay-btn {
    width: 240rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background-color: #007aff;
    color: #fff;
    border-radius: 35rpx;
    font-size: 28rpx;
  }
}
</style>